<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>介绍 - YOLOv8视频智能检测</title>
    <!-- 外部资源引入 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Tailwind CSS 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2563eb', // 主色调
                        secondary: '#4f46e5', // 辅助色
                        danger: '#ef4444', // 危险色
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }

            .shadow-custom {
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            }

            .card-hover {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }

            .card-hover:hover {
                transform: translateY(-4px);
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
            }

            .drag-over {
                border-color: #2563eb;
                background-color: rgba(37, 99, 235, 0.05);
            }
        }
    </style>

    <!-- 主样式 -->
    <style>
        /* 全局样式 */
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #f8fafc;
        }

        /* 上传区域样式 */
        .upload-area {
            transition: all 0.3s ease;
        }

        /* 进度条动画 */
        .progress-bar {
            transition: width 0.3s ease;
        }

        /* 渐变背景 */
        .gradient-bg {
            background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
        }

        /* 平滑滚动 */
        html {
            scroll-behavior: smooth;
        }

        /* 模态框动画 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .fade-in {
            animation: fadeIn 0.3s ease-out;
        }

        /* 隐藏滚动条但保持功能 */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* 底部导航栏样式 */
        .bottom-nav {
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-top: 1px solid rgba(0, 0, 0, 0.05);
        }

        /* 导航项激活状态 */
        .nav-item.active {
            color: #2563eb;
        }

        /* 页面切换动画 */
        .page-content {
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .page-content.hidden {
            opacity: 0;
            transform: translateX(20px);
            display: none;
        }

        /* 滚动动画样式 */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

        .animate-on-scroll.animate-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* 为不同部分设置不同的动画延迟，创造层次感 */
        .feature-card {
            transition: transform 0.3s ease, opacity 0.6s ease;
        }

        .process-step {
            transition: transform 0.3s ease, opacity 0.5s ease;
        }

        /* 横向滚动容器 */
        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }

        /* 按钮悬停动画 */
        .btn-primary {
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
        }
    </style>
</head>
<body class="min-h-screen flex flex-col">
<!-- 介绍页面内容 -->
<div id="intro-page" class="page-content block container mx-auto px-4 py-8">
    <!-- 顶部英雄区域 -->
    <section class="mb-16 px-4 animate-on-scroll">
        <!-- 功能卡片轮播 -->
        <div class="relative">
            <div class="function-carousel-container overflow-hidden">
                <div id="function-carousel" class="flex transition-transform duration-500 ease-in-out">
                    <div class="function-slide bg-gradient-to-r from-blue-600 to-indigo-700 rounded-xl overflow-hidden shadow-xl w-full md:w-80 flex-shrink-0 relative">
                        <div class="absolute inset-0 opacity-10">
                            <i class="fa fa-bolt text-[20rem] text-white absolute -top-20 -right-20"></i>
                        </div>
                        <div class="relative p-5 z-10">
                            <div class="bg-white/20 backdrop-blur-sm rounded-full w-14 h-14 flex items-center justify-center mb-4 mx-auto">
                                <i class="fa fa-camera text-white text-xl"></i>
                            </div>
                            <h3 class="text-lg font-semibold mb-2 text-center text-white">铁塔智能检测系统</h3>
                            <p class="text-white/90 text-sm text-center mb-4">
                                基于YOLOv8的无人机铁塔图像实时分析</p>
                            <button id="carousel-go-to-detect"
                                    class="w-full py-2 bg-white text-blue-600 rounded-lg font-medium hover:bg-white/90 transition-all transform hover:-translate-y-0.5">
                                开始检测
                            </button>
                        </div>
                    </div>
                    <!-- 功能卡片1：螺栓状态检测 -->
                    <div class="function-slide bg-white rounded-xl shadow-md p-5 w-full md:w-80 flex-shrink-0 border-t-4 border-indigo-500">
                        <div class="bg-gradient-to-br from-indigo-100 to-purple-100 rounded-full w-14 h-14 flex items-center justify-center mb-4">
                            <i class="fa fa-cog text-indigo-600 text-xl"></i>
                        </div>
                        <h3 class="text-lg font-semibold mb-2 text-gray-800">螺栓状态检测</h3>
                        <p class="text-gray-600 text-sm">自动识别正常螺栓、松动螺栓和脱落螺栓，精准定位问题位置</p>
                    </div>

                    <!-- 功能卡片2：腐蚀等级评估 -->
                    <div class="function-slide bg-white rounded-xl shadow-md p-5 w-full md:w-80 flex-shrink-0 border-t-4 border-teal-500">
                        <div class="bg-gradient-to-br from-teal-100 to-green-100 rounded-full w-14 h-14 flex items-center justify-center mb-4">
                            <i class="fa fa-leaf text-teal-600 text-xl"></i>
                        </div>
                        <h3 class="text-lg font-semibold mb-2 text-gray-800">腐蚀等级评估</h3>
                        <p class="text-gray-600 text-sm">
                            智能判断铁塔腐蚀程度，分为无腐蚀、轻度腐蚀、中度腐蚀和重度腐蚀</p>
                    </div>

                    <!-- 功能卡片3：改进YOLOv8算法 -->
                    <div class="function-slide bg-white rounded-xl shadow-md p-5 w-full md:w-80 flex-shrink-0 border-t-4 border-cyan-500">
                        <div class="bg-gradient-to-br from-cyan-100 to-blue-100 rounded-full w-14 h-14 flex items-center justify-center mb-4">
                            <i class="fa fa-microchip text-cyan-600 text-xl"></i>
                        </div>
                        <h3 class="text-lg font-semibold mb-2 text-gray-800">改进YOLOv8算法</h3>
                        <p class="text-gray-600 text-sm">
                            采用频率增强特征融合技术，显著提高小目标检测精度和背景干扰下的稳定性</p>
                    </div>

                    <!-- 功能卡片4：实时预警 -->
                    <div class="function-slide bg-white rounded-xl shadow-md p-5 w-full md:w-80 flex-shrink-0 border-t-4 border-purple-500">
                        <div class="bg-gradient-to-br from-purple-100 to-pink-100 rounded-full w-14 h-14 flex items-center justify-center mb-4">
                            <i class="fa fa-bell text-purple-600 text-xl"></i>
                        </div>
                        <h3 class="text-lg font-semibold mb-2 text-gray-800">实时预警机制</h3>
                        <p class="text-gray-600 text-sm">
                            根据检测结果智能分级预警，及时提醒维护人员处理潜在安全隐患</p>
                    </div>
                </div>
            </div>

            <!-- 轮播指示器 -->
            <div class="flex justify-center mt-6 space-x-2">
                <button class="function-dot w-3 h-3 rounded-full bg-primary opacity-100 transition-opacity"
                        data-index="0"></button>
                <button class="function-dot w-3 h-3 rounded-full bg-primary opacity-50 transition-opacity"
                        data-index="1"></button>
                <button class="function-dot w-3 h-3 rounded-full bg-primary opacity-50 transition-opacity"
                        data-index="2"></button>
                <button class="function-dot w-3 h-3 rounded-full bg-primary opacity-50 transition-opacity"
                        data-index="3"></button>
                <button class="function-dot w-3 h-3 rounded-full bg-primary opacity-50 transition-opacity"
                        data-index="4"></button>
            </div>

            <!-- 滑动提示 -->
            <div class="text-center mt-2 text-gray-400 text-sm" style="display: none;">
                <i class="fa fa-hand-pointer-o mr-1"></i> 左右滑动查看更多功能
            </div>
        </div>
    </section>

    <section class="mb-12" style="display: none;">
        <div class="relative bg-gradient-to-r from-blue-600 to-indigo-700 rounded-3xl overflow-hidden shadow-xl mb-8">
            <div class="absolute inset-0 opacity-10">
                <i class="fa fa-bolt text-[20rem] text-white absolute -top-20 -right-20"></i>
            </div>
            <div class="relative p-8 md:p-12 text-white z-10">
                <h1 class="text-[clamp(1.8rem,5vw,2.5rem)] font-bold mb-4 text-center">铁塔智能检测系统</h1>
                <p class="text-white/90 text-center mb-6 max-w-2xl mx-auto">
                    基于YOLOv8的无人机铁塔图像实时分析，智能识别螺栓松动与腐蚀状态
                </p>
                <div class="flex justify-center">
                    <button id="go-to-detect"
                            class="px-6 py-3 bg-white text-blue-600 rounded-full font-medium shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1">
                        <i class="fa fa-camera mr-2"></i>开始检测
                    </button>
                </div>
            </div>
        </div>
    </section>

    <!-- 项目概述 -->
    <section class="mb-16 px-4 animate-on-scroll">
        <div class="bg-white rounded-2xl shadow-lg p-6 md:p-8">
            <h2 class="text-[clamp(1.5rem,4vw,2rem)] font-bold mb-4 text-blue-700">项目概述</h2>
            <p class="text-gray-700 mb-4 leading-relaxed">
                本系统旨在开发一款能够实时地对无人机拍摄的铁塔图像进行分析和判断，尤其是针对铁塔的螺栓松动与腐蚀状态进行辨别的互联网软件应用。通过深度学习技术，实现铁塔异常状态的自动识别与预警。
            </p>
            <div class="bg-blue-50 rounded-xl p-4 mt-4">
                <div class="flex items-start">
                    <i class="fa fa-lightbulb-o text-yellow-500 mt-1 mr-3 text-xl"></i>
                    <p class="text-gray-700 text-sm">
                        通过对YOLOv8的neck部分网络架构进行改进，实现了频率增强的多尺度特征融合、频率聚焦下采样以及语义对齐和校准，显著提高了对小目标螺栓和腐蚀状态的检测精度。
                    </p>
                </div>
            </div>
        </div>
    </section>
</div>

<!-- JavaScript -->
<script>
    // 核心功能轮播逻辑
    document.addEventListener('DOMContentLoaded', function () {
        const carousel = document.getElementById('function-carousel');
        const slides = document.querySelectorAll('.function-slide');
        const dots = document.querySelectorAll('.function-dot');
        let currentIndex = 0;
        let interval;
        let isDragging = false;
        let startX, startScrollLeft;
        const minDragDistance = 50; // 最小滑动距离阈值

        // 获取卡片宽度（考虑响应式）
        function getSlideWidth() {
            return slides[0].offsetWidth;
        }

        // 切换到指定索引 - 确保平滑过渡
        function goToSlide(index) {
            // 先保存当前索引作为上一个位置
            const previousIndex = currentIndex;

            // 计算新索引并限制范围
            let newIndex = index;
            if (newIndex < 0) newIndex = slides.length - 1;
            if (newIndex >= slides.length) newIndex = 0;
            
            // 更新当前索引
            currentIndex = newIndex;

            // 移动轮播 - 确保从当前位置平滑过渡到目标位置
            const slideWidth = getSlideWidth();

            // 应用平滑过渡动画
            carousel.style.transition = 'transform 500ms ease-in-out';
            carousel.style.transform = `translateX(-${currentIndex * slideWidth}px)`;

            // 更新指示器
            dots.forEach((dot, i) => {
                dot.style.opacity = i === currentIndex ? '1' : '0.5';
            });
        }

        // 下一张
        function nextSlide() {
            // 确保从当前页面过渡到下一页
            goToSlide(currentIndex + 1);
        }

        // 上一张
        function prevSlide() {
            // 确保从当前页面过渡到上一页
            goToSlide(currentIndex - 1);
        }

        // 启动自动轮播
        function startAutoPlay() {
            // 先清除之前可能存在的定时器，避免多个定时器同时运行
            clearInterval(interval);
            // 设置新的定时器，每3秒切换一次
            interval = setInterval(nextSlide, 3000);
        }

        // 停止自动轮播
        function stopAutoPlay() {
            clearInterval(interval);
        }

        // 滑动开始
        function startDrag(e) {
            isDragging = true;
            carousel.classList.add('cursor-grabbing');

            // 获取触摸/鼠标起始位置
            startX = e.type.includes('mouse') ? e.pageX : e.touches[0].pageX;

            // 保存当前位置作为起始滚动位置
            const slideWidth = getSlideWidth();
            startScrollLeft = -currentIndex * slideWidth;

            // 移除过渡效果以实现流畅拖动
            carousel.style.transition = 'none';
            stopAutoPlay(); // 拖动时停止自动播放
        }

        // 滑动中
        function drag(e) {
            if (!isDragging) return;
            e.preventDefault();

            // 计算滑动距离
            const x = e.type.includes('mouse') ? e.pageX : e.touches[0].pageX;
            const deltaX = x - startX;

            // 计算新的位置，确保拖动是相对于当前页面
            let newPosition = startScrollLeft + deltaX;

            // 添加边界阻力，但允许自由拖动
            const slideWidth = getSlideWidth();

            // 左侧边界阻力
            if (newPosition > 0) {
                // 在第一页向左拖动时添加阻力
                newPosition = newPosition * 0.5;
            }
            // 右侧边界阻力
            if (newPosition < -slideWidth * (slides.length - 1)) {
                // 在最后一页向右拖动时添加阻力
                newPosition = -slideWidth * (slides.length - 1) + (newPosition + slideWidth * (slides.length - 1)) * 0.5;
            }

            // 应用新位置
            carousel.style.transform = `translateX(${newPosition}px)`;
        }

        // 滑动结束
        function endDrag() {
            isDragging = false;
            carousel.classList.remove('cursor-grabbing');

            // 恢复过渡效果
            carousel.style.transition = 'transform 500ms ease-in-out';

            // 计算当前位置和滑动距离
            const slideWidth = getSlideWidth();
            const translateX = parseInt(carousel.style.transform.replace('translateX(', '').replace('px)', '')) || 0;
            const dragDistance = Math.abs(translateX - startScrollLeft);

            // 计算基于当前位置的目标索引，确保从当前页面平滑过渡
            let targetIndex;
            
            // 根据当前translateX位置精确计算应该跳转到哪个卡片
            // 计算理想位置的索引，Math.round确保就近吸附到完整卡片
            targetIndex = Math.round(-translateX / slideWidth);
            
            // 确保索引在有效范围内
            if (targetIndex < 0) targetIndex = 0;
            if (targetIndex >= slides.length) targetIndex = slides.length - 1;

            // 应用新的目标索引
            goToSlide(targetIndex);

            startAutoPlay(); // 结束拖动后恢复自动播放
        }

        // 绑定事件
        dots.forEach((dot, index) => {
            dot.addEventListener('click', function () {
                stopAutoPlay();
                // 确保从当前页面平滑过渡到点击的页面
                goToSlide(index);
                startAutoPlay();
            });
        });

        // 鼠标拖拽事件
        carousel.addEventListener('mousedown', startDrag);
        carousel.addEventListener('mousemove', drag);
        carousel.addEventListener('mouseup', endDrag);
        carousel.addEventListener('mouseleave', endDrag);

        // 触摸滑动事件（移动端）
        carousel.addEventListener('touchstart', startDrag);
        carousel.addEventListener('touchmove', drag, {passive: false});
        carousel.addEventListener('touchend', endDrag);

        // 鼠标悬停时停止轮播
        const carouselContainer = document.querySelector('.function-carousel-container');
        carouselContainer.addEventListener('mouseenter', stopAutoPlay);
        carouselContainer.addEventListener('mouseleave', startAutoPlay);

        // 响应式调整
        window.addEventListener('resize', function () {
            // 保存当前索引，确保从当前页面重新定位
            const slideWidth = getSlideWidth();
            carousel.style.transition = 'transform 300ms ease-in-out';
            carousel.style.transform = `translateX(-${currentIndex * slideWidth}px)`;
        });

        // 初始化 - 确保从第一个页面开始
        carousel.style.transform = `translateX(0)`;
        startAutoPlay();
    });

    // 添加滚动动画效果
    const animateOnScroll = () => {
        const elements = document.querySelectorAll('.animate-on-scroll');

        elements.forEach(element => {
            const elementPosition = element.getBoundingClientRect().top;
            const windowHeight = window.innerHeight;

            if (elementPosition < windowHeight * 0.85) {
                element.classList.add('animate-visible');
            }
        });
    };

    // 初始检查
    window.addEventListener('load', animateOnScroll);
    // 滚动时检查
    window.addEventListener('scroll', animateOnScroll);

    // 绑定'开始检测'按钮点击事件
    document.addEventListener('DOMContentLoaded', function() {
        const carouselGoToDetect = document.getElementById('carousel-go-to-detect');
        const goToDetectBtn = document.getElementById('go-to-detect');
        
        // 向父窗口发送消息，切换到检测页面
        const switchToDetect = () => {
            if (window.parent) {
                window.parent.postMessage({action: 'switchToPage', page: 'detect'}, '*');
            }
        };
        
        if (carouselGoToDetect) {
            carouselGoToDetect.addEventListener('click', switchToDetect);
        }
        
        if (goToDetectBtn) {
            goToDetectBtn.addEventListener('click', switchToDetect);
        }
    });
</script>
</body>
</html>